<template>
  <el-dialog
    v-model="visible"
    :title="props.id ? '修改Meta申请开户' : 'Meta申请开户'"
    width="60%"
    :show-close="false"
    :close-on-click-modal="false"
  >
    <div>
      <div>
        <ApplyStepView />
      </div>
      <div class="form-content">
        <el-form
          ref="formRef"
          :model="formData"
          :rules="formRules"
          label-width="120px"
          class="application-form"
        >
          <el-form-item
            label="公司注册名称"
            prop="enterpriseName"
            class="form-item"
          >
            <el-input
              v-model="formData.enterpriseName"
              placeholder="请输入公司注册名称"
            />
          </el-form-item>
          <el-form-item label="公司邮箱" prop="email" class="form-item">
            <el-input v-model="formData.email" placeholder="请输入公司邮箱" />
          </el-form-item>
          <el-form-item label="官方网址" prop="promotionLink" class="form-item">
            <el-input
              v-model="formData.promotionLink"
              placeholder="请输入官方网址"
            />
          </el-form-item>
          <el-form-item label="时区" prop="accountTimeZone" class="form-item">
            <el-input
              v-model="formData.accountTimeZone"
              placeholder="请输入时区"
            />
            <!-- <el-select
              v-model="formData.accountTimeZone"
              placeholder="请选择时区"
              style="width: 100%"
            >
              <el-option label="Asia/Shanghai/UTC+8" value="Asia/Shanghai" />
              <el-option label="Asia/Tokyo/UTC+9" value="Asia/Tokyo" />
              <el-option label="Asia/Seoul/UTC+9" value="Asia/Seoul" />
              <el-option label="Asia/Manila/UTC+8" value="Asia/Manila" />
              <el-option label="Asia/Bangkok/UTC+7" value="Asia/Bangkok" />
              <el-option label="Asia/Jakarta/UTC+7" value="Asia/Jakarta" />
              <el-option label="Asia/Singapore/UTC+8" value="Asia/Singapore" />
              <el-option
                label="Asia/Kuala_Lumpur/UTC+8"
                value="Asia/Kuala_Lumpur"
              />
              <el-option label="Asia/Hong_Kong/UTC+8" value="Asia/Hong_Kong" />
              <el-option label="Asia/Taipei/UTC+8" value="Asia/Taipei" />
            </el-select> -->
          </el-form-item>
          <el-form-item
            label="公共主页链接"
            prop="homepageLink"
            class="form-item"
          >
            <el-input
              v-model="formData.homepageLink"
              placeholder="请输入公共主页链接"
            />
          </el-form-item>
          <el-form-item
            label="Meta应用的编号"
            prop="metaNumber"
            class="form-item"
          >
            <el-input
              v-model="formData.metaNumber"
              placeholder="请输入Meta应用的编号"
            />
          </el-form-item>
          <!-- <el-form-item label="结算货币" prop="currencyType" class="form-item">
            <el-radio-group v-model="formData.currencyType">
              <el-radio
                v-for="dict in bus_currency_type"
                :key="dict.value"
                :value="dict.value"
                >{{ dict.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item> -->
          <el-form-item label="预存金额" prop="prestorePrice" class="form-item">
            <el-input-number
              v-model="formData.prestorePrice"
              placeholder="请输入预存金额"
            />
            <!-- <el-input
              v-model="formData.prestorePrice"
              placeholder="请输入预存金额"
              clearable
            >
              <template #append>
                {{ selectDictLabels(bus_currency_type, getCoinType()) }}
              </template>
            </el-input> -->
          </el-form-item>
          <el-form-item
            label="营业执照附件"
            prop="businessLicenseUrl"
            class="form-item"
          >
            <ImageUpload v-model="formData.businessLicenseUrl" :limit="1" />
          </el-form-item>
          <el-form-item label="联系人" prop="contactName" class="form-item">
            <el-input
              v-model="formData.contactName"
              placeholder="请输入联系人"
            />
          </el-form-item>
          <el-form-item
            label="联系人电话"
            prop="contactPeople"
            class="form-item"
          >
            <el-input
              v-model="formData.contactPeople"
              placeholder="请输入联系人电话"
              maxlength="11"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <template #footer>
      <el-button @click="handleCancel"> 取消 </el-button>
      <el-button type="primary" @click="handleSubmit">
        {{ formData.id ? "修改" : "提交开始申请" }}
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import ApplyStepView from "../apply-step.vue";
import { computed, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { handleApply } from "@/utils/accountApply";
import { getCoinType } from "@/utils//auth.js";
import { applyPlatform } from "@/const/index.ts";
import { getApplyAccountDetail, editApplyAccount } from "@/api/apply/index.js";
import { de } from "element-plus/es/locales.mjs";

const { proxy } = getCurrentInstance();
const { bus_currency_type } = proxy.useDict("bus_currency_type");

const props = defineProps({
  value: {
    type: Boolean,
    default: false,
  },
  id: {
    type: String,
    default: "",
  },
});

const emits = defineEmits(["update:value", "on-success"]);

const visible = computed({
  get() {
    return props.value;
  },
  set(val) {
    emits("update:value", val);
  },
});
const detailInfo = ref({});
const formRef = ref();
const formData = reactive({
  systemType: applyPlatform.META,
  enterpriseName: "",
  email: "",
  promotionLink: "",
  accountTimeZone: "",
  homepageLink: "",
  metaNumber: "",
  prestorePrice: "",
  currencyType: "",
  businessLicenseUrl: "",
  contactName: "",
  contactPeople: "",
});

const formRules = reactive({
  enterpriseName: [
    { required: true, message: "请输入公司注册名称", trigger: "blur" },
  ],
  email: [
    { required: true, message: "请输入公司邮箱", trigger: "blur" },
    { type: "email", message: "请输入正确的邮箱格式", trigger: "blur" },
  ],
  promotionLink: [
    { required: true, message: "请输入官方网址", trigger: "blur" },
    {
      pattern: /^https?:\/\/.+/,
      message: "请输入正确的官方网址",
      trigger: "blur",
    },
  ],
  // accountTimeZone: [{ required: true, message: "请选择时区", trigger: "blur" }],
  homepageLink: [
    { required: true, message: "请输入公共主页链接", trigger: "blur" },
    {
      pattern: /^https?:\/\/.+/,
      message: "请输入正确的公共主页链接",
      trigger: "blur",
    },
  ],
  currencyType: [
    { required: true, message: "请选择结算货币", trigger: "blur" },
  ],
  prestorePrice: [
    { required: true, message: "请输入预存金额", trigger: "blur" },
    {
      pattern: /^\d+(\.\d{1,2})?$/,
      message: "请输入正确的金额格式",
      trigger: "blur",
    },
  ],
  businessLicenseUrl: [
    { required: true, message: "请上传营业执照附件", trigger: "change" },
  ],
  contactName: [{ required: true, message: "请输入联系人", trigger: "blur" }],
  contactPeople: [
    { required: true, message: "请输入联系人电话", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的电话码格式",
      trigger: "blur",
    },
  ],
});

// 提交表单
function handleSubmit() {
  try {
    if (!formRef.value) return;

    formRef.value.validate(async (valid) => {
      if (valid) {
        formData.mediaMeta = {
          accountTimeZone: formData.accountTimeZone,
          homepageLink: formData.homepageLink,
          metaNumber: formData.metaNumber,
          prestorePrice: formData.prestorePrice,
        };
        if (formData.id) {
          formData.mediaMeta.id = detailInfo.value.mediaMeta.id;
          formData.mediaMeta.mediaId = detailInfo.value.mediaMeta.mediaId;
          await editApplyAccount(formData);
          emits("on-success");
          ElMessage.success("修改成功");
        } else {
          await handleApply(formData);
          ElMessage.success("申请成功");
        }
        visible.value = false;
      }
    });
  } catch (error) {}
}

// 取消
function handleCancel() {
  visible.value = false;
  // 重置表单数据
  Object.assign(formData, {
    enterpriseName: "",
    email: "",
    promotionLink: "",
    accountTimeZone: "",
    homepageLink: "",
    metaNumber: "",
    prestorePrice: "",
    currencyType: "",
    businessLicenseUrl: "",
    contactName: "",
    contactPeople: "",
  });
  formRef.value?.resetFields();
}

function getDetail() {
  getApplyAccountDetail(props.id).then(({ data }) => {
    detailInfo.value = data;
    Object.assign(formData, {
      ...data,
      ...data.mediaMeta,
    });
  });
}

watch(
  () => visible.value,
  (val) => {
    if (val && props.id) {
      getDetail();
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>

<style scoped lang="scss">
.form-content {
  margin-top: 20px;
}
</style>
